<template>
    <div class="item-layout">
        <div class="title">
            <h3>{{title}}</h3>
            <slot name="afterTitle"></slot>
        </div>

        <div class="main">
            <slot></slot>
        </div>
    </div>
</template>

<script>

export default {
    mixins: [],
    components: {  },
    props: {
        title: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            
        };
    },
    computed: {
        
    },
    watch: {},
    methods: {
        
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.item-layout {
    // border: 1px solid;
    // margin-bottom: 30px;
    .title{
        display: flex;
        align-items: baseline;

        h3 {
            margin-right: 8px;
        }
        
    }
    .main {
        margin-top: 17px;
    }
}
</style>